Commanding with C1Toolbar (Silverlight Tutorial)

Silverlight 4 supports the ICommand interface on any object that derives from the ButtonBase class. Any button, including C1ToolbarButton, can be associated with an object that implements ICommand through the control’s Command property. Although the ICommand interface is supported, Silverlight does not provide any built-in implementation. Silverlight Edition includes a couple implementations, C1Command and C1ToolbarCommand, so you do not have to write one yourself.

The C1Command class is included in the C1.Silverlight assembly. C1ToolbarCommand, included in the C1.Silverlight.Toolbar assembly, extends C1Command by adding a few extra toolbar related properties for labels and images.
The following steps demonstrate how to use commanding with C1Toolbar.

Using C1ToolbarCommand

Open or create a new Silverlight application.

Add two RowDefinitions to the default Grid element, giving the first row an automatic height, such as this:

XAML	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

Add a C1Toolbar to the fill the first row.
Add a TextBox in the second row.

Paste the following C1ToolbarCommand to the UserControl Resources such as this:

XAML	Copy Code
<UserControl.Resources> <c1:C1ToolbarCommand x:Key="cmdClear" LabelTitle="Clear Text" LargeImageSource="/Resources/delete.png" /> </UserControl.Resources>

This command will be used to clear the contents from the TextBox. You can specify a LargeImageSource and a SmallImageSource for C1ToolbarCommand, although this is not required.

Paste the following XAML to fill C1Toolbar with a tab, group and button:

XAML	Copy Code
<c1:C1Toolbar Name="c1Toolbar1"> <c1:C1ToolbarTabControl> <c1:C1ToolbarTabItem Header="Home"> <c1:C1ToolbarGroup Header="Application"> <c1:C1ToolbarButton c1:CommandExtensions.Command="{StaticResource cmdClear}" /> </c1:C1ToolbarGroup> </c1:C1ToolbarTabItem> </c1:C1ToolbarTabControl> </c1:C1Toolbar>

XAML

Copy Code

<c1:C1Toolbar Name="c1Toolbar1">
    <c1:C1ToolbarTabControl>
        <c1:C1ToolbarTabItem Header="Home">
            <c1:C1ToolbarGroup Header="Application">
                <c1:C1ToolbarButton c1:CommandExtensions.Command="{StaticResource cmdClear}" />
            </c1:C1ToolbarGroup>
        </c1:C1ToolbarTabItem>
    </c1:C1ToolbarTabControl>
</c1:C1Toolbar>

Here we are setting the attached c1:CommandExtensions.Command property to our command. Note that C1ToolbarButton also has an inherited Command property. It is better to use the attached property CommandExtensions.Command to set the command when using C1Commands.
Add a TextBox to the page below the toolbar named “textBox1”.

Next, you need to register the command after the page initializes with this code:

C#	Copy Code
// register command methods CommandManager.RegisterClassCommandBinding(GetType(), new CommandBinding((C1ToolbarCommand)Resources["cmdClear"], Clear, CanClear)); // check the ability of registered commands to execute CommandManager.InvalidateRequerySuggested();

Copy Code

// register command methods
CommandManager.RegisterClassCommandBinding(GetType(), new CommandBinding((C1ToolbarCommand)Resources["cmdClear"], Clear, CanClear));
// check the ability of registered commands to execute
CommandManager.InvalidateRequerySuggested();

The C1.Silverlight.CommandManager provides command related utility methods for registering commands.

Paste the following Clear and CanClear event handlers which perform the logic for the command:

C#	Copy Code
private void Clear(object sender, ExecutedRoutedEventArgs e) { textBox1.Text = ""; } private void CanClear(object sender, CanExecuteRoutedEventArgs e) { if (textBox1.Text.Length > 0) { e.CanExecute = true; } else e.CanExecute = false; }

Copy Code

private void Clear(object sender, ExecutedRoutedEventArgs e)
{
    textBox1.Text = "";
}
     
private void CanClear(object sender, CanExecuteRoutedEventArgs e)
{
    if (textBox1.Text.Length > 0)
    {
        e.CanExecute = true;
    }
    else
        e.CanExecute = false;
        
}

In Silverlight you need to explicitly check the ability of registered commands in code. In the TextBox TextChanged event, add the following code:

C#	Copy Code
private void textBox1_TextChanged(object sender, TextChangedEventArgs e) { CommandManager.InvalidateRequerySuggested(); }

Run the sample and you can now clear the contents of the textbox using a command in C1Toolbar using C1Command.